<!-- 维修列表(已完成) -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
  </pageHeader>
  <div class="content">
    <div class="content-header">
      <a-space>
        <div>
          <a-input-group>
            <a-select
              :style="{
                flex: 1,
              }"
              v-model="currSelectName"
              placeholder="请选择"
              @change="search"
            >
              <a-option value="number">维修单号</a-option>
              <a-option value="equipNumber">设备编码</a-option>
            </a-select>
            <a-input-search
              search-button
              :style="{
                flex: 3,
              }"
              placeholder="请输入"
              v-model="currNumber"
              @search="search"
            >
            </a-input-search>
          </a-input-group>
        </div>
        <div>
          <!-- <span> 设备名称： </span> -->
          <a-input-search
            search-button
            :style="{ width: 'auto' }"
            placeholder="请输入设备名称"
            v-model="currEquipName"
            @search="search"
          >
            <template #prefix>设备名称：</template>
            <template #button-icon>
              <icon-search />
            </template>
            <template #button-default> 搜索 </template>
          </a-input-search>
        </div>

        <a-button type="outline" @click="reset">
          <template #icon>
            <icon-refresh />
          </template>
          <template #default>重置</template>
        </a-button>
      </a-space>
      <a-space>
        <a-button
          type="outline"
          :style="{
            margin: '0 5px 0 10px',
            borderColor: '#4cd263',
            color: '#4cd263',
          }"
        >
          <template #icon>
            <icon-download />
          </template>
          <template #default>导入</template>
        </a-button>
        <a-button
          type="outline"
          :style="{
            margin: '0 10px 0 5px',
            borderColor: '#ffcf8b',
            color: '#ffcf8b',
          }"
        >
          <template #icon>
            <icon-export :rotate="-90" />
          </template>
          <template #default>导出</template>
        </a-button>
      </a-space>
    </div>
    <a-divider />
    <div>
      <TableTurn :args="args" :table-data="getData" ref="tableRef">
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>

        <a-table-column
          :width="150"
          align="center"
          title="维修单号"
          data-index="number"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        >
        </a-table-column>

        <a-table-column
          :width="150"
          align="center"
          title="设备名称"
          data-index="equipName"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        >
        </a-table-column>
        <a-table-column
          :width="150"
          align="center"
          title="设备编码"
          data-index="equipNumber"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        >
        </a-table-column>
        <!-- <a-table-column :width="150" align="center" title="故障描述">
          <template #cell="{ record }">
            <a-button type="text" @click="goDetail(record, 2)">查看</a-button>
          </template>
        </a-table-column> -->

        <a-table-column
          :width="150"
          align="center"
          title="报修人"
          data-index="reporterName"
        >
        </a-table-column>
        <a-table-column
          :width="200"
          align="center"
          title="报修时间"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        >
          <template #cell="{ record }">
            {{ `${dayjs(record.reporterTime).format('YYYY-MM-DD HH:mm:ss')}` }}
          </template>
        </a-table-column>

        <a-table-column
          :width="150"
          align="center"
          title="维修人"
          data-index="repairerName"
        >
        </a-table-column>
        <a-table-column
          :width="200"
          align="center"
          title="维修开始时间"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        >
          <template #cell="{ record }">
            {{
              record.repairBeginTime === 0
                ? '-'
                : `${dayjs(record.repairBeginTime).format(
                    'YYYY-MM-DD HH:mm:ss'
                  )}`
            }}
          </template>
        </a-table-column>

        <a-table-column
          :width="200"
          align="center"
          title="维修结束时间"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        >
          <template #cell="{ record }">
            {{
              record.repairEndTime === 0
                ? '-'
                : `${dayjs(record.repairEndTime).format('YYYY-MM-DD HH:mm:ss')}`
            }}
          </template>
        </a-table-column>
        <!-- <a-table-column :width="150" align="center" title="故障分析及处理">
          <template #cell="{ record }">
            <a-button type="text" @click="goDetail(record, 4)">查看</a-button>
          </template>
        </a-table-column> -->
        <a-table-column :width="150" align="center" title="维修状态">
          <template #cell="{ record }">
            <div
              class="status"
              :style="{
                color: orderStatus.filter(
                  (ele) => ele.id === record.repairState
                )[0]?.backgroundColor,
              }"
            >
              <p
                :style="{
                  'background': orderStatus.filter(
                    (ele) => ele.id === record.repairState
                  )[0]?.backgroundColor,
                  'box-shadow': `0px 0px 5px`,
                }"
              ></p>
              {{
                orderStatus.filter((ele) => ele.id === record.repairState)[0]
                  ?.value
              }}
            </div>
            <!-- <div class="repair-state">
              <div
                class="cycle"
                :class="
                  record.repairState === 1
                    ? 'waitJob-cycle'
                    : record.repairState === 2
                    ? 'waitRepair-cycle'
                    : record.repairState === 3
                    ? 'running-cycle'
                    : record.repairState === 4
                    ? 'needOut-cycle'
                    : record.repairState === 5
                    ? 'outing-cycle'
                    : 'finish-cycle'
                "
              >
              </div>
              <div
                :class="
                  record.repairState === 1
                    ? 'waitJob'
                    : record.repairState === 2
                    ? 'waitRepair'
                    : record.repairState === 3
                    ? 'running'
                    : record.repairState === 4
                    ? 'needOut'
                    : record.repairState === 5
                    ? 'outing'
                    : 'finish'
                "
                >{{
                  record.repairState === 1
                    ? '待派工'
                    : record.repairState === 2
                    ? '待维修'
                    : record.repairState === 3
                    ? '进行中'
                    : record.repairState === 4
                    ? '需委外'
                    : record.repairState === 5
                    ? '已委外'
                    : '已完工'
                }}</div
              >
            </div> -->
          </template>
        </a-table-column>

        <!-- 操作item -->
        <a-table-column align="center" :width="150" fixed="right" title="操作">
          <template #cell="{ record }">
            <!-- <a-button
              type="text"
              :style="{
                backgroundColor: '#31C27C',
                color: '#fff',
              }"
              v-if="
                record.repairState === 1 ||
                record.repairState === 2 ||
                record.repairState === 3 ||
                record.repairState === 4
              "
              @click="
                goDetail(
                  record,
                  record.repairState === 1
                    ? 3
                    : record.repairState === 2
                    ? 4
                    : record.repairState === 3
                    ? 4
                    : -1
                )
              "
            >
              {{
                record.repairState === 1
                  ? '派工'
                  : record.repairState === 2
                  ? '维修'
                  : record.repairState === 3
                  ? '编辑'
                  : record.repairState === 4
                  ? '委外'
                  : ''
              }}
            </a-button> -->
            <a-tooltip
              v-if="
                record.repairState === 1 ||
                record.repairState === 2 ||
                record.repairState === 3 ||
                record.repairState === 4
              "
              :content="
                record.repairState === 1
                  ? '派工'
                  : record.repairState === 2
                  ? '维修'
                  : record.repairState === 3
                  ? '编辑'
                  : record.repairState === 4
                  ? '委外'
                  : ''
              "
            >
              <IconFont
                type="icon-shezhi1"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="
                  goDetail(
                    record,
                    record.repairState === 1
                      ? 3
                      : record.repairState === 2
                      ? 4
                      : record.repairState === 3
                      ? 4
                      : -1
                  )
                "
              />
            </a-tooltip>

            <a-tooltip content="维修详情">
              <IconFont
                type="icon-details-def"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="goDetail(record, 5)"
              />
            </a-tooltip>
            <a-tooltip v-if="record.state !== 6" content="删除">
              <a-popconfirm
                content="确认删除？"
                type="error"
                @ok="deleteItem(record.id)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table-column>
      </TableTurn>
      <equipmentRepair
        :type="type"
        :form="form.list"
        v-model:visible="repairVisible"
        @equipmentEmit="equipmentEmit"
      ></equipmentRepair>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { reactive, ref } from 'vue';
  import dayjs from 'dayjs';
  import {
    PostFaultEquipment,
    GetFaultEquipmentList,
    DelFaultEquipment,
  } from '@/api/equipment-management/equipment-maintain-manager';
  import equipmentRepair from '../../components/equipment-repair/index.vue';

  const router = useRouter();
  const title: string = '设备维修列表(已完成)';
  const breadCrumb: string[] = [
    '设备管理',
    '设备维护（管理）',
    '设备维修列表(已完成)',
  ];

  const orderStatus = [
    { id: 1, value: '待派工', backgroundColor: '#cccccc' },
    { id: 2, value: '待维修', backgroundColor: '#009933' },
    { id: 3, value: '进行中', backgroundColor: '#4e8bfb' },
    { id: 4, value: '需委外', backgroundColor: '#009933' },
    { id: 5, value: '已委外', backgroundColor: '#dc143c' },
    { id: 6, value: '已完工', backgroundColor: '#009933' },
  ];

  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true,
    },
  });

  let tableRef = ref(); // 储存table的ref

  // 储存某行的信息
  const form = reactive({
    list: {},
  });

  let type = ref(1); // 判断弹出框的type

  let currNumber = ref(''); // 第一个搜索框
  let currSelectName = ref(''); // 储存第一个搜索框的下拉框值

  let currEquipName = ref(''); // 设备名称搜索框
  let currRepairState = ref(undefined);

  // 获取表格数据
  const getData = async (pageData?: any) => {
    try {
      const data: any = {};
      data.repairState = 6;
      if (currNumber.value.trim() !== '')
        data[currSelectName.value] = currNumber.value;
      if (currEquipName.value.trim() !== '')
        data.equipName = currEquipName.value;
      else if (currRepairState.value === 0) data.repairState = '';
      const res = await GetFaultEquipmentList({
        ...pageData,
        authority: 1,
        ...data,
      });
      return Promise.resolve(res);
    } catch (error: unknown) {
      console.log(error);
    }
  };

  let repairVisible = ref(false); // 判断故障报修弹出框是否弹出

  // 点击故障报修按钮
  const repairFault = () => {
    type.value = 1;
    repairVisible.value = true;
  };

  // 搜索框事件
  const search = () => {
    tableRef.value.loadData();
  };

  // 弹出框的自定义事件
  const equipmentEmit = async (list: any, type: number) => {
    try {
      if (type === 1) {
        list.repairState = 1; // 待派工状态
        await PostFaultEquipment({
          equipNumber: list.equipNumber,
          number: list.number,
          equipName: list.equipName,
          workshop: list.workshop,
          reportTime: list.reportTime,
          reporterId: list.reporterId,
          description: list.description,
          picture: list.picture,
          repairState: list.repairState,
          equipmentId: list.equipmentId,
          authority: 1,
        });
        tableRef.value.loadData();
      } else if (type === 3) {
        await PostFaultEquipment({
          equipNumber: list.equipNumber,
          number: list.number,
          equipName: list.equipName,
          workshop: list.workshop,
          reportTime: list.reportTime,
          reporterId: list.reporterId,
          description: list.description,
          picture: list.picture,
          repairState: list.repairState,
          repairerId: list.repairerId,
          id: list.id,
          equipmentId: list.equipmentId,
          authority: list.authority,
        });
        tableRef.value.loadData();
      } else if (type === 4) {
        await PostFaultEquipment({
          repairState: list.repairState,
          repairerId: list.repairerId,
          id: list.id,
          authority: list.authority,
          repairBeginTime: Number(list.repairBeginTime),
          repairEndTime: Number(list.repairEndTime),
          isReplaceparts: list.isReplaceparts,
          isSubcontracting: list.isSubcontracting,
          faultAnalysis: list.faultAnalysis,
          treatmentMeasures: list.treatmentMeasures,
          equipmentId: list.equipmentId,
        });
        repairVisible.value = false;
        tableRef.value.loadData();
      }
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // 表格故障描述中的的查看按钮
  const goDetail = (record: any, currType: number) => {
    type.value = currType;
    form.list = record;
    repairVisible.value = true;
  };

  // 删除一项
  const deleteItem = async (id: number) => {
    try {
      await DelFaultEquipment({
        id,
        authority: 1,
      });
      tableRef.value.loadData();
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // 重置
  const reset = () => {
    currNumber.value = '';
    currSelectName.value = '';
    currEquipName.value = '';
    currRepairState.value = undefined;
    tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .content {
    padding: 10px;

    &-header {
      display: flex;
      width: 100%;
      height: 40px;
      justify-content: space-between;
    }

    .repair-state {
      display: flex;
      justify-content: center;
      text-align: center;
      .cycle {
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        content: '';
        display: inline-block;
        top: 3px;
        right: 10px;
      }
    }

    // 待派工
    .waitJob {
      color: #ccc;
    }
    .waitJob-cycle {
      background-color: #ccc;
    }

    // 维修中
    .waitRepair {
      color: #ccc;
    }
    .waitRepair-cycle {
      background-color: #ccc;
    }
    // 进行中
    .running {
      color: #3d7eff;
    }
    .running-cycle {
      background-color: #3d7eff;
    }
    // 需委外
    .needOut {
      color: #f90;
    }
    .needOut-cycle {
      background-color: #f90;
    }
    // 已委外
    .outing {
      color: #3cf;
    }
    .outing-cycle {
      background-color: #3cf;
    }
    // 已完工
    .finish {
      color: #31c27c;
    }
    .finish-cycle {
      background-color: #31c27c;
    }
  }

  .status {
    display: flex;
    align-items: center;
    justify-content: center;

    p {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
</style>
